﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - Display Preview Line for Print</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - Display Preview Line for Print"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n0","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="Usually, before printing any report data, users tend to preview how the document will look like after the printing job is executed. This is done using the Print Preview dialog that helps to identify, view and fix any potential page layout glitches. B" /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="113a269e-7da8-412b-9a65-45042a24b828"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><meta name="Microsoft.Help.TocParent" content="4938901c-996c-4cf4-b1ac-a40b6edf52a6"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><meta name="Microsoft.Help.TocOrder" content="3"/><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="i-breadcrumbs-container">
<a href="overview.html">SpreadJS Documentation</a>
 / <a href="devguide.html">Developer's Guide</a>
 / <a href="features.html">Features</a>
 / <a href="managedata.html">Manage Data</a>
 / <a href="printing.html">Understand Printing</a>
 / Display Preview Line for Print</div><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->Display Preview Line for Print<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>Usually, before printing any report data, users tend to preview how the document will look like after the printing job is executed. This is done using the&nbsp;Print Preview dialog that&nbsp;helps to identify, view and fix any potential&nbsp;page layout glitches. But, unfortunately, the&nbsp;Print Preview dialog can only&nbsp;generate a preview of the entire worksheet and doesn't allow users to preview and print specific&nbsp;data.</p>

<p>SpreadJS allows users to display preview lines for printing so that only the desired data is printed as per their custom requirements.&nbsp;This feature is useful especially when you're working with large worksheets but you want to print only specific chunks of data (or cell ranges) on different pages.&nbsp;</p>

<p>Users can use the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.Worksheet~isPrintLineVisible.html" data-auto-update-caption="true">isPrintLineVisible()</a> method of the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.Worksheet.html" data-auto-update-caption="true">Worksheet</a> class to get or set whether to display preview lines in the worksheet.</p>

<h3>Example</h3>

<p>For instance, let's assume that you're working on a marketing application containing product sales information and other statistical figures from different regions. Now, you want to print the sales data of different regions on different pages. In such a scenario,&nbsp;it becomes important to check and preview whether the data selected for printing will print on the correct page. By displaying preview lines for printing, users can correctly print desired data on specific pages.</p>

<p>An example image displaying preview lines for printing is shown below. When users set the starting row as 2, starting column as 1, end row&nbsp;as 6 and end column as 4;&nbsp;preview lines will be displayed&nbsp;to indicate the printing area as B3:E7.&nbsp;</p>

<p><img border="0" alt="" src="images/display-print-line-2.jpg" />&nbsp;</p>

<h3>Using Code</h3>

<p>Refer to the following code to display preview lines for printing.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">
                    <p>&lt;!DOCTYPE html&gt;<br />
                    &lt;html&gt;<br />
                    &lt;head&gt;<br />
                    &lt;script src="<a href="https://code.jquery.com/jquery-2.1.1.min.js"><u><font color="#0066CC">https://code.jquery.com/jquery-2.1.1.min.js</font></u></a>" type="text/javascript"&gt;&lt;/script&gt;<br />
                    &lt;link href="css/gc.spread.sheets.excel2013white.12.2.0.css" rel="stylesheet" /&gt;<br />
                    &lt;script src="scripts/gc.spread.sheets.all.12.2.0.min.js"&gt;&lt;/script&gt;<br />
                    &lt;script src="scripts/gc.spread.sheets.print.12.2.0.min.js"&gt;&lt;/script&gt;<br />
                    &lt;script&gt;<br />
                    $(document).ready(function ()</p>

                    <p>{<br />
                    &nbsp;// Initialize spread<br />
                    &nbsp;var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'),</p>

                    <p>&nbsp;&nbsp; { sheetCount: 1 });<br />
                    &nbsp;spread.suspendPaint();<br /></p>

                    <p>&nbsp;// Fetch the ActiveSheet<br />
                    &nbsp;var sheet = spread.getActiveSheet();<br />
                    &nbsp;sheet.setRowCount(600);<br />
                    &nbsp;sheet.setColumnCount(80);<br />
                    &nbsp;</p>

                    <p>&nbsp;// Set value<br />
                    &nbsp;for (var r = 0, rc = sheet.getRowCount() + 150; r &lt; rc; r++) {<br />
                    &nbsp;for (var c = 0, cc = sheet.getColumnCount() + 20; c &lt; cc; c++) {<br />
                    &nbsp;sheet.setValue(r, c, r + c);<br />
                    &nbsp;}<br />
                    &nbsp;}<br />
                    &nbsp;</p>

                    <p>&nbsp;// Set print info<br />
                    &nbsp;var printInfo = sheet.printInfo();<br />
                    &nbsp;spread.resumePaint();</p>

                    <p>&nbsp;$("#print").click(function () {<br />
                    &nbsp;spread.print();<br />
                    &nbsp;});<br />
                    &nbsp;$("#printLine").click(function () {<br />
                    &nbsp;var activeSheet = spread.getActiveSheet();<br />
                    &nbsp;var isDisplayPrintLine = activeSheet.isPrintLineVisible();<br />
                    &nbsp;activeSheet.isPrintLineVisible(!isDisplayPrintLine);<br />
                    &nbsp;});<br />
                    &nbsp;$("#updatePrintInfo").click(function () {<br />
                    &nbsp;var activeSheet = spread.getActiveSheet();<br />
                    &nbsp;var printInfo = activeSheet.printInfo();<br />
                    &nbsp;var startRow = parseInt(document.getElementById("startRow").value);<br />
                    &nbsp;var endRow = parseInt(document.getElementById("endRow").value);<br />
                    &nbsp;var startColumn = parseInt(document.getElementById("startColumn").value);<br />
                    &nbsp;var endColumn = parseInt(document.getElementById("endColumn").value);<br />
                    &nbsp;printInfo.rowStart(startRow);<br />
                    &nbsp;printInfo.rowEnd(endRow)<br />
                    &nbsp;printInfo.columnStart(startColumn);<br />
                    &nbsp;printInfo.columnEnd(endColumn);<br />
                    &nbsp;});</p>

                    <p>&nbsp;});<br />
                    &lt;/script&gt;<br />
                    &lt;/head&gt;<br />
                    &lt;body&gt;<br />
                    &lt;table&gt;<br />
                    &lt;tr&gt;<br />
                    &lt;td&gt;StartRow: &lt;/td&gt;<br />
                    &lt;td&gt; &lt;input id="startRow" type="text" value="0" /&gt; &lt;/td&gt;<br />
                    &lt;/tr&gt;<br />
                    &lt;tr&gt;<br />
                    &lt;td&gt;StartColumn: &lt;/td&gt;<br />
                    &lt;td&gt;&lt;input id="startColumn" type="text" value="0" /&gt; &lt;/td&gt;<br />
                    &lt;/tr&gt;<br />
                    &lt;tr&gt;<br />
                    &lt;td&gt;EndRow: &lt;/td&gt;<br />
                    &lt;td&gt; &lt;input id="endRow" type="text" value="12" /&gt; &lt;/td&gt;<br />
                    &lt;/tr&gt;<br />
                    &lt;tr&gt;<br />
                    &lt;td&gt;EndColumn: &lt;/td&gt;<br />
                    &lt;td&gt; &lt;input id="endColumn" type="text" value="12" /&gt; &lt;/td&gt;<br />
                    &lt;/tr&gt;<br />
                    &lt;/table&gt;<br />
                    &lt;div style=" margin-top:10px"&gt;<br />
                    &lt;input type="button" id="updatePrintInfo" value="Update PrintInfo"&gt;<br />
                    &lt;input type="button" style=" margin-left:16px" id="printLine" value="Print Line"&gt;<br />
                    &lt;input type="button" style=" margin-left:16px" id="print" value="Print"&gt;<br />
                    &lt;/div&gt;<br />
                    &lt;div id="ss" style="height:650px;width:1000px; margin-top:20px"&gt;&lt;/div&gt;</p>

                    <p>&lt;/body&gt;<br />
                    &lt;/html&gt;&nbsp;</p>
                </td>
            </tr>
        </tbody>
    </table>
</div><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
